<template>
  <el-card class="box-card">
    <el-button type="primary" @click="addRole">添加角色</el-button>
    <AddRole ref="addroles" @getAddConfirm="getAddConfirm"></AddRole>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="#" width="50" />
      <el-table-column prop="roleName" label="角色名称" width="261" />
      <el-table-column prop="roleDesc" label="角色描述" width="270" />

      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            size="small"
            @click="handleEdit(scope.$index, scope.row)"
            type="primary"
          >
            <el-icon>
              <Edit />
            </el-icon>
            编辑
          </el-button>
          <EditRole ref="edit" @getEdit="handleEdit"></EditRole>

          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >
            <el-icon>
              <Delete />
            </el-icon>
            删除
          </el-button>
          <DeleteDialog ref="del" @getDelete="getDelete"></DeleteDialog>

          <el-button
            size="small"
            type="warning"
            @click="openPower(scope.$index, scope.row)"
          >
            <el-icon>
              <Setting />
            </el-icon>
            分配权限
          </el-button>
          <PowerDialog ref="openPowerDiaolg"></PowerDialog>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script lang="ts" setup>
import { getRoleList, addRoleList, getPowerTree, getMenus } from "@/api/role";
import { ref, reactive, nextTick } from "vue";
import AddRole from "./component/AddRole.vue";
import EditRole from "./component/EditRole.vue";
import DeleteDialog from "./component/DeleteDialog.vue";
import PowerDialog from "./component/PowerDialog.vue";
import { useStore } from "vuex";
const store = useStore();
interface User {
  roleName: string;
  roleDesc: string;
  id: string;
}

const addroles = ref();
const edit = ref();
const del = ref();

const tableData: any = reactive([]);

// 角色信息以及权限信息
const getRole = async () => {
  let res = await getRoleList();
  let ress = await getMenus();
  console.log(ress, "ress", res.data.data, ress, "角色和权限信息");
  tableData.push(...res.data.data);
  // console.log(tableData[0])
};

getRole();

// 添加角色弹窗
const addRole = () => {
  console.log(addroles.value);
  addroles.value.addDialog();
};

// 确认添加
const getAddConfirm = (role: { roleName: string; roleDesc: string }) => {
  console.log(role);
  const { roleName, roleDesc } = role;
  addRoleList({ roleName, roleDesc });
  tableData.push({
    roleName,
    roleDesc,
  });
};

// 编辑
const handleEdit = (index: number, row: User) => {
  console.log(index, row, "ssssss");
  if (row.id) {
    edit.value.editDialog(index, row);
  }
  {
    tableData[index].roleName = row.roleName;
    tableData[index].roleDesc = row.roleDesc;
  }
};

// 删除
const handleDelete = (index: number, row: User) => {
  // console.log(index, row);
  del.value.deleteDialog(index, row);
};

const getDelete = (index: number) => {
  // console.log(index, '删除index')
  tableData.splice(index, 1);
};

// 分配权限
const openPowerDiaolg = ref();
const openPower = async (index: number, row: any) => {
  // 每次更新数据都需要过去最新的权限列表 防止添加权限数据时获取不到最新的
  let rows = await getRoleList();
  // console.log(rows.data.data[index].children, row.children, "最新的权限列表");
  // console.log(index, row, "分配");
  // 权限id row.children
  // console.log(row, 1111111111111);

  // 获取权限树tree结构
  let res: any = await getPowerTree("tree");
  // console.log(res, "权限树");
  store.dispatch("role/SET_ROLETREE", res.data.data);
  openPowerDiaolg.value.openDialog(rows.data.data[index].children, row.id);
};
</script>

<style scoped lang="scss">
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 100%;
  height: auto;
}

.el-table {
  margin-top: 20px;
}

.el-button {
  margin: 0 5px;
}
</style>
<style>
.el-table__inner-wrapper::before {
  z-index: 0;
}
</style>
